<template>
  <el-container >
    <el-aside style="width:380px; background-color: white">
      <el-calendar v-model="dateValue">
      </el-calendar>
    </el-aside>
    <el-container>
      <el-main>
        <list :paramDateArr="paramDateArr" style="padding: 0px;"/>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { parseTime } from '@/utils'
import List from './complex-list-line-edit.vue'

export default {
    name: 'TmptDataSetting-AsideCalendarSearchList',
    components: { List },
    data() {
        return {
            dateValue: new Date(),
            paramDateArr: []
        }
    },
    watch: {
        dateValue(nval) {
            const dateStr = parseTime(nval) // 2020-03-24 08:00:00
            const dateStart = dateStr.substr(0, 10)
            const dateEnd = dateStr.substr(0, 10)
            // 子组件接收日期参数，是一个范围，再通过工具类分解成2个查询参数传给后台。 eg: createdate_Start、createdate_End
            this.paramDateArr = [dateStart, dateEnd]
        }
    }
}
</script>
<style>
  /* 调整页面日历高度*/
  .el-calendar-table .el-calendar-day{
    height: 38px;
  }

  .el-calendar__body td {
    text-align: center;
  }
  .is-selected {
    color: red;
  }
</style>
